<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/购物车.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/首页.css">
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->
    <script src="../js/api.js"></script>
    <script src="../js/axios.min .js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/shop.js"></script>


</head>

<body>
    <div class="topWrap">
        <header class="nav">
            <div class="nav-top">
                <div class="nav-left">
                    <h1><a href="../html/首页.html"><img src="../img/logo.png" alt=""></a></h1>
                </div>
                <div class="nav-right">
                    <span onclick="seaFn()" class="glyphicon glyphicon-search"></span>
                    <div>
                        <h2 class="glyphicon glyphicon-search"></h2>
                        <input type="text" value="搜索">
                    </div>
                    <ul>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-heart-empty"></span>
                            </a>
                        </li>

                        <li>
                            <!-- <a href="../html/购物车.html"> -->
                            <h2 onclick="carFy()" class="glyphicon glyphicon-shopping-cart"></h2>

                            </a>
                            <strong class="cat">0</strong>
                        </li>
                        <li class="dl">
                            <a href="#">
                                <h3 class="glyphicon glyphicon-user"></h3>

                            </a>
                            <ul class="login">
                                <li><a href="../html/注册.html">注册</a></li>
                                <li><a href="../html/登录.html">登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-button">
                <div class="nav-navs">
                    <ul>
                        <li class="shop">
                            <a href="../html/商城.html">
                                <span>商店</span>

                            </a>
                            <div class="zong">
                                <div class="zou">
                                    <h2>主题</h2>
                                    <p><a href="#">可爱的高尔夫用品</a></p>
                                    <p><a href="#">寻欢作乐</a></p>
                                    <p><a href="#">可爱的家灯</a></p>
                                    <p><a href="#">蓬松舒适的项目</a></p>
                                    <p><a href="#">嘀嗒式数字时钟</a></p>
                                </div>
                                <div class="zhong">
                                    <h2>类别</h2>
                                    <p><a href="#">玩具</a></p>
                                    <p><a href="#">电子学</a></p>
                                    <p><a href="#">家庭</a></p>
                                    <p><a href="#">活的</a></p>
                                    <p><a href="#">学校及办事处</a></p>
                                    <p><a href="#">体育</a></p>
                                    <p><a href="#">时尚</a></p>
                                    <p><a href="#">美</a></p>
                                </div>
                                <div class="you">
                                    <h2>人物</h2>
                                    <p><a href="#">布朗和朋友</a></p>
                                    <p><a href="#">BT 21</a></p>
                                    <p><a href="#">斗殴明星</a></p>
                                </div>
                            </div>
                        </li>

                        <li class="houre">
                            <a href="#">
                                <span>8小时</span>
                                <div class="zong2">
                                    <div class="zou">
                                        <img src="../img/1.png" alt="">
                                    </div>
                                    <div class="zhong">
                                        <h2>BT21 BABY JELLY CANDY MINI DOLL</h2>
                                        <p>
                                            <a href="#">Squishy Gummies Are They Real Jellies?<br>
                                                Their plump arms, legs and round shape make <br> them extra charming.
                                                Their
                                                adorable size fits right <br> into your hand! Wrapped in snack packages,
                                                they <br> are
                                                much lovelier than actual gummies.
                                            </a>
                                        </p>
                                        <button class="btn"> <a href="#">GO TO 8-hours</a> </button>
                                    </div>
                                    <div class="you">
                                        <div class="pic">
                                            <img src="../img/zong/1.png" alt="">
                                            <img src="../img/zong/2.png" alt="">
                                            <img src="../img/zong/3.png" alt="">
                                            <img src="../img/zong/4.png" alt="">
                                            <img src="../img/zong/5.png" alt="">
                                            <img src="../img/zong/6.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="houre1"> <span><a href="#">档案馆</a></span></li>
                        <li class="houre2"> <span><a href="#">通知</a></span></li>
                        <li class="houre3"> <span><a href="#">关于</a></span></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>

    <div class="banner">
        <div class="swiper-container lb">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../img/banner/1.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/2.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/3.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/4.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/5.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/6.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/7.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/8.png" alt="" /></div>
                <div class="swiper-slide"><img src="../img/banner/9.png" alt="" /></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-pagination"></div>
            <div class="swiper-pagination"></div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="content">
        <h2>新来港人士</h2>
        <dl class="con-pic">
            <dt>
                <img src="../img/content/1.png" alt="">
            </dt>
            <dd class="babay1">
                <p><a href="../html/商城.html">BT 21 婴儿秋千</a></p>
            </dd>
            <dd class="baby2">
                <p><a href="../html/商城.html">便携式迷你风扇></a></p>
            </dd>
        </dl>

        <dl class="con-pic" style="margin-left: 20px; margin-right: 0;">
            <dt>
                <img src="../img/content/2.png" alt="">
            </dt>
            <dd class="babay1">
                <p><a href="../html/商城.html">布朗跟朋友 PHYPS></a></p>
            </dd>

        </dl>

        <dl class="con-pic" style="margin-right:0; margin-left: 48px;">
            <dt>
                <img src="../img/content/3.png" alt="">
            </dt>
            <dd class="babay1">
                <p><a href="../html/商城.html">斗殴明星雕像钥匙圈</a></p>
            </dd>
        </dl>


        <ul class="con-top"></ul>





    </div>

    <!--  -->
    <!--  -->
    <!--  -->
    <div class="hot">
        <h2>畅销书</h2>
        <div class="hot-left">
            <img src="../img/hot/1.png" alt="">
        </div>
        <div class="hot-right">
            <div class="hot-t">
                <h3>BT 21 婴儿 <br> 照明蛋糕娃娃</h3>
                <p>这是送给你的</p>
                <span><a href="#">了解更多</a></span>
            </div>


            <div class="hot-b">
                <div class="swiper-container lb1" style="width: 550px;height: 300px;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="left-pic">
                                <img src="../img/hot/2.png" alt="" />
                                <a href="#">
                                    <p>BT 21婴儿照明蛋糕娃娃<br><span>$26.00</span></p>
                                </a>
                            </div>
                            <div class="left-pic">
                                <img src="../img/hot/3.png" alt="" />
                                <a href="#">
                                    <p>BT 21婴儿照明蛋糕娃娃<br><span>$26.00</span></p>
                                </a>
                            </div>


                        </div>
                        <div class="swiper-slide">
                            <div class="left-pic">
                                <img src="../img/hot/4.png" alt="" />
                                <a href="#">
                                    <p>BT 21婴儿照明蛋糕娃娃<br><span>$26.00</span></p>
                                </a>
                            </div>
                            <div class="left-pic">
                                <img src="../img/hot/5.png" alt="" />
                                <a href="#">
                                    <p>BT 21婴儿照明蛋糕娃娃<br><span>$26.00</span></p>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="left-pic">
                                <img src="../img/hot/5.png" alt="" />
                                <a href="#">
                                    <p>BT 21婴儿照明蛋糕娃娃<br><span>$26.00</span></p>
                                </a>
                            </div>
                            <div class="left-pic">
                                <img src="../img/hot/2.png" alt="" />
                                <a href="#">
                                    <p>BT 21婴儿照明蛋糕娃娃<br><span>$26.00</span></p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>


        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="new">
        <h2>事件</h2>
        <!--  -->

        <!--  -->
        <div class="swiper-container lb2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/new/1.png" alt="" />
                    <h4>月回顾</h4>
                    <p>不要错过获胜的机会！</p>
                    <h5>01</h5>
                </div>
                <div class="swiper-slide">
                    <img src="../img/new/2.png" alt="" />
                    <h4>灵魂伴侣奖励计划</h4>
                    <p>为我们的友谊干杯！</p>
                    <h5>02</h5>
                </div>

            </div>


            <div class="swiper-button-prev"></div>

            <div class="swiper-button-next"></div>
        </div>
    </div>




    <div class="review">
        <h2>月回顾</h2>
        <div class="review-left">
            <img src="../img/review/1.png" alt="">
        </div>
        <div class="review-right">
            <span>
                <img src="../img/review/2.png" alt="">
            </span>
            <p>亚历克斯*</p>
            <strong>2021年5月30日 | 评级 <h6>****</h6></strong>
            <h3>可爱而且非常有用</h2>
                <p class="con1">
                    我可以用邮袋来保护我的旧充电器电缆以及我的有线耳机。它附带的电缆也非常有用，每当我需要充电的另一个项目，如平板电脑或蓝牙耳机，甚至我的塔塔方便风扇。我个人认为这个版本比你可以切换8引脚或C型头部的那个版本要好，因为它们很容易坏掉。事实上，我已经失去了两者的头脑，所以我不能使用它在苹果或类型-C
                    USB产品。
                </p>
                <img class="review-pic" src="../img/review/1.jpg" alt="">
                <img class="review-pic" style="margin-left: 20px;" src="../img/review/2.jpg" alt="">
                <img class="review-pic" style="margin-left: 20px;" src="../img/review/3.jpg" alt="">

        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="video">
        <div class="video-left">
            <p>在线上创建自己的产品朋友创建 者</p>
            <button><a href="#">开始设计</a></button>
        </div>
        <div class="video-right">
            <div class="tv">
                <video controls="controls" playsinline="" loop="" muted="" autoplay=""
                    style="max-width: 100%; height: auto;">
                    <source
                        src="https://s3.marpple.co/files/u_29089/2019/9/original/f_778372_1567764484981_Ns9LT4fgBgVRGzvW5G.mp4"
                        type="video/mp4">
                </video>
            </div>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="media">
        <h2>社交媒体</h2>
        <div class="media-left">
            <dl class="case">
                <dt>
                    <img src="../img/media/1.jpg" alt="">
                    <div class="black">
                        <a href="#">
                            <p>SHOP THIS LOOK</p>
                        </a>
                    </div>
                </dt>
            </dl>
        </div>
        <div class="media-right">
            <dl class="case1" style="margin-left: 10px;">
                <dt>
                    <img src="../img/media/2.jpg" alt="">
                    <div class="black1">
                        <a href="#">
                            <p>SHOP THIS LOOK</p>
                        </a>
                    </div>
                </dt>
            </dl>
            <!--  -->
            <dl class="case1" style="margin-left: 10px;">
                <dt>
                    <img src="../img/media/3.jpg" alt="">
                    <div class="black1">
                        <a href="#">
                            <p>SHOP THIS LOOK</p>
                        </a>
                    </div>
                </dt>
            </dl>
            <!--  -->
            <dl class="case1" style="margin-left: 10px;margin-top: -15px;">
                <dt>
                    <img src="../img/media/4.jpg" alt="">
                    <div class="black1">
                        <a href="#">
                            <p>SHOP THIS LOOK</p>
                        </a>
                    </div>
                </dt>
            </dl>
            <!--  -->
            <dl class="case1" style="margin-left: 10px;margin-top: -15px;">
                <dt>
                    <img src="../img/media/5.jpg" alt="">
                    <div class="black1">
                        <a href="#">
                            <p>SHOP THIS LOOK</p>
                        </a>
                    </div>
                </dt>
            </dl>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <!-- end -->
    <div class="end">
        <div class="end-top">
            <div class="ipt">
                <h4>订阅我们的通信</h4>
                <input class="text" type="text" value="Enter e-mail here">
                <span class="iconfont"><a href="#">&#xe61a;</a></span>
                <input class="checkbox" type="checkbox">
                <p>我接受 <a href="#">条款和条件</a> 和 <a href="#">隐私政策</a> </p>
            </div>
            <div class="ipt-ri">
                <ul>
                    <li>
                        <h2><a href="#">商店</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">全买</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">八小时</a></li>
                </ul>
                <!--  -->
                <ul>
                    <li>
                        <h2><a href="#">通知</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">航运信息</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">回报与交换</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">条款和条件</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">隐私政策</a></li>
                </ul>
                <!--  -->
                <ul style="width: 200px;">
                    <li>
                        <h2><a href="#">支撑</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">客服服务</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">太阳星期五</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">下午19:00-2:00(PDT)</a></li>
                </ul>
            </div>
        </div>
        <div class="end-buttom">
            <div class="end-left">
                <p>电话号码：726-87-00030 CEO：Seong Hoon Kim <br>地址：韩国汉城永山谷汉南达罗98楼5楼</p>
                <span><a href="#">2021年，行友公司由线友设计</a></span>
            </div>
            <div class="end-right">
                <img src="../img/end/1.png" alt="">
            </div>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="cars" style="z-index: 10;">
        <div class="cars-t">
            <button class="cars-btn">x</button>
        </div>
        <ul class="cars-b">
            <li>
                <img src="" alt="">
                <p>123456</p>
                <div class="numb">数量：
                    <button class="cars-btn1">-</button>
                    <input class="cars-ipt" type="text">
                    <button class="cars-btn2">+</button>
                </div>
                <span>
                    <button class="cars-btn3">移除</button>
                </span>
                <button class="cars-btn4">购物车</button>
            </li>
        </ul>
    </div>
    <!-- 搜索框 -->
    <div class="search" style="display: none;">
        <span onclick="seaFn2()" class="glyphicon glyphicon-search"></span>
        <input class="search-ipts" type="text">
    </div>
    <!-- 搜索框复选 -->
    <div class="search1">
        <ul class="search-u">
            <li>
                <img src="" alt="">
                <p>123456</p>
                <span>123456</span>
            </li>
        </ul>
    </div>















</body>
<script>
    var mySwiper = new Swiper(".lb", {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
    var mySwiper = new Swiper(".lb1", {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
    // 
    // 
    // 购物车商品种类数量
    fn1();
    async function fn1() {
        let uid = localStorage.getItem("uid");
        let params = { id: uid };
        let { data } = await axios.get(cartList, { params });
        $(".cat").html(data.data.length);
        console.log(data);
    }
    // 
    var mySwiper = new Swiper(".lb2", {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
    // 注册、登录跳转按钮
    $(".dl").click(function () {
        $(".login").css("display", "block")

    });
    $(".banner").click(function () {
        $(".login").css("display", "none");
    })
    // 
    // 购物车复选页面
    function carFy() {
        console.log(123);
        $(".cars").css("display", "block");
    }
    $(".cars-btn").click(function () {
        $(".cars").css("display", "none");
    })
    //查询购物车商品，列表展示
    fn();
    async function fn() {
        let pagesize = 10;
        let pagenum = 0;
        let uid = localStorage.getItem('uid');
        let params = { pagesize, pagenum, uid };
        let { data } = await axios.get(proudtListAPI, { params });
        console.log(data);
        let newData = data.data;
        let arr = newData.map((res) =>
            `
            <li>
            <a href="详情页.html?pid=${res.pid}">
                <img src="${res.pimg}" alt="">
                <p>${res.pname}</p> 
                <span>$${res.pprice}</span>
            </a>
          </li>
        `
        )
        $(".con-top").html(arr.join(""));
        fn4()
    }
    //
    // fn4();
    async function fn4() {
        let uid = localStorage.getItem("uid");
        let params = { id: uid };
        let { data } = await axios.get(cartList, { params });
        console.log(data);
        console.log($(".cat").html(data.data.length));
    }
    // 
    // 
    // 
    // 购物车复选页面功能
    carsFn();
    async function carsFn() {
        let uid = localStorage.getItem("uid");
        let params = { id: uid };
        let { data } = await axios.get(cartList, { params });
        let arr = data.data;
        let newArr = arr.map((res) =>
            `
            <li>
                <img src="${res.pimg}" alt="">
                <p>${res.pname}</p>
                <div class="numb">数量：
                    <button onclick="carsSub(${res.pid},this)" class="cars-btn1">-</button>
                    <input class="cars-ipt" type="text" value="${res.pnum}">
                    <button onclick="carsAdd(${res.pid},this)"  class="cars-btn2">+</button>
                </div>
                <span><i>$${res.pprice}</i>
                    <button onclick="carsDel(${res.pid},this)" class="cars-btn3">移除</button>
                </span>
                <button class="cars-btn4"><a href="../html/购物车.html">购物车</a></button>
            </li>
            `
        );
        $(".cars-b").html(newArr.join(""));
    };
    //减少商品数量更新列表
    async function carsSub(pid, btn) {
        let ipt = btn.nextElementSibling;
        if (parseInt(ipt.value) == 1) {
        } else {
            console.log(ipt);
            ipt.value = parseInt(ipt.value) - 1;
            //
            let uid = localStorage.getItem("uid");
            console.log(uid);
            let pnum = ipt.value
            console.log(pnum);
            let params = { uid, pid, pnum };
            let { data } = await axios.get(cartUpdate, { params });
            console.log(params);
        };
    };
    // 增加商品数量并更新列表
    async function carsAdd(pid, btn) {
        let ipt = btn.previousElementSibling;
        ipt.value = parseInt(ipt.value) + 1;
        // 
        let uid = localStorage.getItem("uid");
        let pnum = ipt.value;
        console.log(pnum);
        let params = { uid, pid, pnum };
        let { data } = await axios.get(cartUpdate, { params });
    }
    // 删除购物车商品
    carsDel();
    async function carsDel(pid) {
        let uid = localStorage.getItem("uid");
        let params = { uid, pid };
        let { data } = await axios.get(cartDelete, { params })
        console.log(data.msg);
        carsFn();
        fn1();
    }
    //搜索框显示与隐藏
    function seaFn() {
        $(".search").css("display", "block");
    }
    $(".banner").click(function () {
        $(".search").css("display", "none");
    })
    $(".search1").click(function () {
        $(".search").css("display", "none");
    })
    // 
    async function seaFn2() {
        let pagesize = 10;
        let pagenum = 0;
        let uid = localStorage.getItem("uid");
        let params = { pagesize, pagenum, uid };
        let { data } = await axios.get(proudtListAPI, { params });
        let arr = data.data;
        console.log(arr);
        let str = $(".search-ipts").val();
        if (str == "") {
            alert("搜索内容不能为空");
            return;
        }
        let searchArr = arr.filter((v) => v.pname.indexOf(str) != -1);
        console.log(searchArr);
        let resArr2 = searchArr.map(
            (res) => `
            <li>
            <a href="详情页.html?pid=${res.pid}">
            <img src="${res.pimg}" alt="">
            <p>${res.pname.replaceAll(str, `<strong>${str}</strong>`)}</p>
            <span>$${res.pprice}</span>
            </a>
          </li>
                `
        );
        let html = resArr2.join("");
        $(".search-u").html(html);



        $(".search1").css("display", "block");
    }
    $(".search1").click(function () {
        $(".search1").css("display", "none");
    })









</script>

</html>